<template>
	<view>
		<view class="gudinglan">
			<view class="searchbar">
				<uni-search-bar @confirm="search" :focus="false" v-model="searchValue" @blur="blur" @focus="focus"
					@input="input" @cancel="cancel" @change="change" @clear="clear"></uni-search-bar>
			</view>

			<view class="tongji">
				<text style="color: #94bcff;font-size: 12px;">
					共有 {{ cardlist.length }} 人</text>
				<button class="my-button" @click="open1()">历史记录</button>
				<button class="my-button" @click="open2()">统计全部</button>
				<view class="example-body">
					<uni-fav :content-text="contentText" @click="dialogToggle('warn')" fgColor="#007aff"></uni-fav>
				</view>
				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="是的" title="确认通知"
						content="确定结算全部人的工单吗？" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
				</uni-popup>
			</view>
		</view>

		<view class="container">
			<uni-card v-for="(card, index) in cardlist" :key="index" :sub-title="card.facotry" :title="card.name"
				extra="未结算">
				<text user-select>{{card.text}}</text>
				<view class="card-actions">
					<view class="card-actions-item" @click="actions1Click(card.text)">
						<uni-icons type="paperplane" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">复制</text>
					</view>
					<view class="card-actions-item" @click="actions2Click(card.name)">
						<uni-icons type="more" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">详情</text>
					</view>
					<view class="card-actions-item" @click="actions3Click(card.name,card.text)">
						<uni-icons type="checkmarkempty" size="18" color="#999"></uni-icons>
						<text class="card-actions-item-text">结算</text>
					</view>
				</view>
			</uni-card>
		</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="600"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				contentText: {
					contentDefault: '全结算',
					contentFav: '全结算'
				},
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				searchValue: '',
				cardlist: '',
				shareText: '', // 用于保存需要分享的文本
				filteredCards: []
			}
		},
		onShow() {
			this.api.WordGeRenZong().then(res => {
				console.log(res)
				this.cardlist = res.data
				console.log(this.cardlist)
				if (res.data != '') {
					this.msgType = 'success'
					this.messageText = `就这么多数据了哦`
					this.$refs.message.open()
				} else {
					this.msgType = 'error'
					this.messageText = `没有记录哦`
					this.$refs.message.open()
				}
			})
		},
		methods: {
			open1() {
				console.log("历史记录")
				// 跳转到详情页面 将参数存到缓存中
				uni.setStorageSync('record', 'word');
				uni.navigateTo({
					url: '/pages/record/record'
				});
			},
			open2() {
				console.log("统计全部")
				uni.navigateTo({
					url: '/pages/openadmin/openadmin'
				});
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
				this.messageText = `点击确认了 ${this.msgType} 窗口`
				
				for (let i = 0; i < this.cardlist.length; i++) {
					console.log("全部结算："+this.cardlist[i].name)
					this.api.SetState({
						name: this.cardlist[i].name,
						text: this.cardlist[i].text
					}).then(res => {
						console.log(res)
						if (res.status >= 1) {
							console.log("结算成功")
							
						} else {
							console.log("结算失败")
						}
					})
				}
				uni.showToast({
					title: '操作成功',
					icon: 'success'
				});
				this.cardlist = ''

			},
			dialogClose() {
				console.log('点击关闭')
			},
			confirm(value) {
				// 输入框的值
				console.log(value)
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			favClick() {
				console.log("结算全部");
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			actions1Click(text) {
				// 复制文本
				this.shareText = text // 将需要分享的文本保存到 shareText
				uni.setClipboardData({
					data: text,
					success() {
						uni.showToast({
							title: '已复制到剪贴板',
							icon: 'success'
						})
					},
					fail() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					}
				})
			},
			actions2Click(title) {
				console.log("详情" + title);
				// 跳转到详情页面 将参数存到缓存中
				uni.setStorageSync('detailstitle', title);
				uni.setStorageSync('details', 'word');
				uni.navigateTo({
					url: '/pages/details/details'
				});


			},
			actions3Click(title, text) {
				console.log("结算" + title);
				this.api.SetState({
					name: title,
					text: text
				}).then(res => {
					console.log(res)
					if (res.status >= 1) {
						this.msgType = 'success'
						this.messageText = title + ` 结算成功啦`
						this.$refs.message.open()
						// 从cardlist数组中删除指定的card
						for (let i = 0; i < this.cardlist.length; i++) {
							if (this.cardlist[i].name === title && this.cardlist[i].text === text) {
								this.cardlist.splice(i, 1);
								break;
							}
						}
					} else {
						this.msgType = 'error'
						this.messageText = title + ` 结算失败啦`
						this.$refs.message.open()
					}
				})
			},
			search(res) {
				this.filteredCards = this.cardlist
				// uni.showToast({
				// 	title: '搜索：' + res.value,
				// 	icon: 'none'
				// })
			},
			input(res) {
				console.log('----input:', res)
				this.cardlist = this.filteredCards
				this.cardlist = this.cardlist.filter(card => {
					return (card?.name?.includes(res) || card?.facotry?.includes(res) )
				})
			},
			clear(res) {
				this.cardlist = this.filteredCards
				// uni.showToast({
				// 	title: 'clear事件，清除值为：' + res.value,
				// 	icon: 'none'
				// })
			},
			blur(res) {
				// uni.showToast({
				// 	title: 'blur事件，输入值为：' + res.value,
				// 	icon: 'none'
				// })
				//点击搜索之外的地方
			},
			focus(e) {
				//保存全部数据 ，点击搜索框
				this.filteredCards = this.cardlist
				// uni.showToast({
				// 	title: 'focus事件，输出值为：' + e.value,
				// 	icon: 'none'
				// })
			},
			cancel(res) {
				this.cardlist = this.filteredCards
				// uni.showToast({
				// 	title: '点击取消，输入值为：' + res.value,
				// 	icon: 'none'
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	.my-button {
		background-color: #8cde9b;
		color: #fff;
		border: none;
		border-radius: 4px;
		padding: 1px 6px;
		/* 调整内边距使按钮更小 */
		font-size: 10px;
		/* 调整字体大小使按钮更小 */
	}

	.gudinglan {
		width: 100%;
		position: fixed;
		top: -1px;
		z-index: 1;
		background-color: #ffffff;
		height: 90px;
	}

	.tongji {
		display: flex;
		justify-content: space-between;
		padding: 0 5%;
	}

	//卡片固定样式
	.container {
		overflow: auto;
		// /* 控制内容溢出时显示滚动条 */
		margin-top: 90px;
		/* 调整合适的距离 */
		padding-bottom: 20px;

		/* 添加底部间距，防止内容紧贴底部 */
		.card-actions {
			display: flex;
			justify-content: space-between;
			padding: 0 2%;
		}

		.card-actions-item {
			display: flex;
			align-items: center;
			padding-top: 10px;

			.card-actions-item-text {
				padding-left: 5px;
			}
		}
	}

	//搜索框样式
	.searchbar {
		.search-result {
			padding-top: 10px;
			padding-bottom: 20px;
			text-align: center;
		}

		.search-result-text {
			text-align: center;
			font-size: 14px;
			color: #666;
		}

		.example-body {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			padding: 0px;
		}

		.uni-mt-10 {
			margin-top: 10px;
		}
	}
</style>